<!-- 我是首页 -->
<template>
  <div id="bigDiv">
    <HeadBu />
    <Swiper />
    <div id="middleContent">
      <div class="divMiddle" @click="goto('/community')">
        <div class="divColor"><i class="el-icon-edit"></i></div>
        <div>学习中心</div>
      </div>
      <div class="divMiddle"  @click="goto('/game')">  
        <div class="divColor"><i class="el-icon-basketball"></i></div>
        <div>益智游戏</div>
      </div>
    </div>
    <div id="hotStudy">
      <div id="reconmened">学习推荐</div>
      <div id="hotContent">
        <div>
          <p class="P1">判别时钟，时间就在你手中</p>
          <p class="P2">认识时钟，让你的生活更加高效有序！</p>
        </div>
        <div class="tupian"><img src="@/assets/clock-g013fc984a_1920.png" alt=""></div>
      <div class="GOGO" @click="goto('/timeColck')"><el-button type="primary" icon="el-icon-right">开始学习</el-button></div>
      </div>
    </div>
    <div id="hotPlay">
      <div id="reconmend2">热门益智</div>
      <div id="hotContent2">
        <div>
          <p class="P1">先手走角,立于不败之地</p>
          <p class="P2">井字棋，小巧精致的智力大比拼！！</p>
        </div>
        <div class="tupian"><img src="@/assets/game-g27c92e6b1_1280.jpg" alt=""></div>
        <div class="GOGO" @click="goto('/TicTacToe')"><el-button type="primary" icon="el-icon-right" >开始挑战</el-button></div>
      </div>
    </div>
    <div id="logo">
      玩出数学好成绩，成就更好未来！
    </div>
  </div>
</template>

<script>
import Swiper from "@/components/Swiper/swiper.vue";
import HeadBu from "@/components/Head/head2.vue";
export default {
  components: { Swiper, HeadBu },
  mounted() {
  },
  methods: {
    goto(address){
      this.$router.push(address)
    }
  }
};
</script>

<style lang="less" scoped>
#bigDiv{
  overflow: hidden;
}
.GOGO{
  text-align: right;
  height: 10vh;
  line-height: 7vh;
  padding-right: 2vw;
}
#logo{
  width: 100vw;
  height: 2vh;
  margin-bottom: 11svh;
 font-weight: bold;
 letter-spacing: 1px;
 line-height: 2vh;
 color: rgb(250, 246, 246);
//  margin-top: 1vh;
}
.tupian {
  background-color: antiquewhite;
  height: 30vh;
  img{
    width: 100%;
    height: 30vh;
    object-fit:cover;
  }
}

.P1 {
  border: 1p solid white;
  font-size: 17px;
  font-weight: bold;
  margin-top: 10px;
  margin-left: 10px;
  letter-spacing: 2px;
}

.P2 {
  font-size: 15px;
  margin-left: 10px;
  color: rgb(151, 150, 149);
}

#middleContent {
  margin-top: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .divMiddle {
    font-size: 17px;
    letter-spacing: 2px;
    margin: 2vw;
    border-radius: 5px;
    width: 49vw;
    height: 9vh;
    background-color: rgb(250, 247, 250);
    line-height: 9vh;
    color: rgb(68, 67, 67);
    display: flex;
    justify-content: space-around;
    align-content: center;
    font-weight: 580;

    .divColor {
      width: 1vw;
      height: 9vh;
      line-height: 9vh;
      margin-left: -1vw;
      font-size: 28px;
      color: rgb(84, 108, 180);
    }
  }
}

#hotStudy {
  margin-top: 2vh;
  text-align: left;
  margin-left: 2vw;
  #reconmened {
    width: 25vw;
    border-left: 2.5vw solid rgb(32, 145, 245);
    height: 5vh;
    line-height: 5vh;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    text-indent: 8px;
    border-radius: 8px;
  }

  #hotContent {
    width: 94vw;
    height: 50vh;
    margin-left: -1vw;
    margin-top: 2vh;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    border: 1px solid white;
  }
}

#hotPlay {
  margin-top: 2vh;
  margin-left: 2vw;
  text-align: left;

  #reconmend2 {
    width: 25vw;
    border-left: 2.5vw solid rgb(230, 6, 36);
    height: 5vh;
    line-height: 5vh;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    text-indent: 8px;
    border-radius: 8px;
  }

  #hotContent2 {
    width: 92vw;
    height: 50vh;
    margin-top: 2vh;
    margin-left: -1vw;
    background-color: rgb(255, 255, 255);
    border: 5px;
    margin-bottom: 4vh;
    border: 1px solid white;
  }
}</style>